<!--
 * @Description: v-bind 默认绑定到 DOM 节点的 attribute 上，使用.prop修饰符后，设置的自定义属性不会在渲染后的 HTML 标签里显示,而.attr修饰符则刚好相反！
 * @version:
 * @Author: dh
 * @Date: 2022-02-23 19:23:07
 * @LastEditors: dh
 * @LastEditTime: 2022-02-23 19:59:04
-->
<template>
	<Test id="test1" name="deng" sex="boy" like="lei" age="20" />

	<!-- 好像设置了attr和什么都不设置一样的效果 -->
	<Test id="test2" :ref="setItemRef" :name.prop="'deng'" .sex="'boy'" :like.attr="'lei'" ^age="20" />
</template>

<script setup>
import { onMounted } from 'vue';
import Test from './components/Test.vue';

onMounted(() => {
	const test1 = document.querySelector('#test1');
	const test2 = document.querySelector('#test2');
	console.log(test1.getAttribute('name')); // deng
	console.log(test1.getAttribute('sex')); // boy 简写

	console.log(test2.getAttribute('name')); // null
	console.log(test2.getAttribute('sex')); // null
});
</script>

<style lang="scss" scoped></style>
